import React, { Component } from 'react';
import { base ,getMultiLang, createPage} from 'nc-lightapp-front';
const { NCButton: Button, NCCheckbox: Checkbox, NCModal: Modal, NCTable: Table, NCDiv } = base;
import './index.less';

/**
 * 
 * 复制到校验框
 * 展示重复数据，选择是否覆盖重复数据
 * 接收父级方法: handleCopyCheckOK(checkedData)
 * 接收父级参数：visible, repeatData
 * 
 */
const defaultProps = {
	prefixCls: 'bee-table',
	multiSelect: {
		type: 'checkbox',
		param: 'key'
	}
};
// const emptyFunc = () => <span>{this.state.json['publiccomponents-000020']}！</span>;/* 国际化处理： 暂无数据*/
class CopyCheckModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			json:{},
			checkedData: [], // 选中数据
			checkedAll: false,
			checkedArray: [
				// false,
				// false,
				// false,
			],
			visible: false,
		};
		this.data = [];
	}
	componentWillMount(){
		let callback= (json) =>{
            this.setState({
              json:json,
				},()=>{
				//initTemplate.call(this, this.props);
            })
        }
		getMultiLang({moduleId:'publiccomponents',domainName:'gl',currentLocale:'simpchn',callback});
    }
	componentWillReceiveProps(nextProps) {
		let { repeatData, visible } = nextProps;
		// let {checkedArray} = this.state
		if(nextProps.visible == this.state.visible){
            return;
        }
		if (!repeatData) {
			repeatData = [];
		}
		let checkArr = [];
		repeatData.forEach((item) => {
			checkArr.push(false);
		});
		
		this.setState({ visible, checkedArray: checkArr});
		if(nextProps.visible){
			this.props.modal.show('copycheck');
		}else{
			this.props.modal.close('copycheck');
		}
	}
	//确定
	handleCopyCheckOK = () => {
		let { checkedData, checkedArray } = this.state;
		let { repeatData } = this.props;
		checkedData = [];
		for (var i = 0; i < checkedArray.length; i++) {
			if (checkedArray[i] == true) {
				checkedData.push(repeatData[i]);
			}
		}
		let { handleCopyCheckOK } = this.props;
		if (handleCopyCheckOK) {
			handleCopyCheckOK(checkedData);
		}
	}
	//取消
	handleCancel = () => {
		let { handleCancel } = this.props;
		if (handleCancel) {
			handleCancel();
		}
	}
	//全选
	onAllCheckChange = () => {
		let self = this;
		let checkedArray = [];
		let selIds = [];
		for (var i = 0; i < self.state.checkedArray.length; i++) {
			checkedArray[i] = !self.state.checkedAll;
		}
		self.setState({
			checkedAll: !self.state.checkedAll,
			checkedArray: checkedArray
		});
	};
	//单选
	onCheckboxChange = (text, record, index) => {
		let self = this;
		let allFlag = false;
		let checkedArray = self.state.checkedArray.concat();
		checkedArray[index] = !self.state.checkedArray[index];
		for (var i = 0; i < self.state.checkedArray.length; i++) {
			if (!checkedArray[i]) {
				allFlag = false;
				break;
			} else {
				allFlag = true;
			}
		}
		self.setState({
			checkedAll: allFlag,
			checkedArray: checkedArray
		});
	};

	renderColumnsMultiSelect = (columns) => {
		const { checkedArray } = this.state;
		const { multiSelect } = this.props;
		let select_column = {};
		let indeterminate_bool = false;
		// let indeterminate_bool1 = true;
		if (multiSelect && multiSelect.type === 'checkbox') {
			let i = checkedArray.length;
			while (i--) {
				if (checkedArray[i]) {
					indeterminate_bool = true;
					break;
				}
			}
			let defaultColumns = [
				{
					title: (
						<span fieldid='firstcol'>
							<Checkbox
								className="table-checkbox"
								checked={this.state.checkedAll}
								indeterminate={indeterminate_bool && !this.state.checkedAll}
								onChange={this.onAllCheckChange}
							/>
						</span>
					),
					key: 'checkbox',
					attrcode: 'checkbox',
					dataIndex: 'checkbox',
					width: '60px',
					render: (text, record, index) => {
						return (
							<span fieldid='firstcol'>
								<Checkbox
									className="table-checkbox"
									checked={this.state.checkedArray[index]}
									onChange={this.onCheckboxChange.bind(this, text, record, index)}
								/>
							</span>							
						);
					}
				}
			];
			columns = defaultColumns.concat(columns);
		}
		return columns;
	}
	modalContent = () => {
		let { repeatData } = this.props;
		let columns = [
			{
				title: (<span fieldid='name'>{this.state.json['publiccomponents-000019']}</span>),/* 国际化处理： 账簿名称*/
				dataIndex: 'name',
				key: 'name',
				render: (text, record, index) => (<span fieldid='name'>{text}</span>)
				// width: "40%"
			}
		];
		const emptyFunc = () => <span>{this.state.json['publiccomponents-000020']}！</span>;/* 国际化处理： 暂无数据*/
		let columnsldad = this.renderColumnsMultiSelect(columns);
		return(
			<div>
				<NCDiv fieldid="copycheck" areaCode={NCDiv.config.TableCom}>
					<Table columns={columnsldad} data={repeatData ? repeatData : []} emptyText={emptyFunc} />
				</NCDiv>
				<p className="tip-box">
					<i className="iconfont icon-tixing" />
					<div className="tip">{this.state.json['publiccomponents-000022']}，{this.state.json['publiccomponents-000023']}</div>{/* 国际化处理： 以上账簿存在相同转账编号的自定义转账定义,请选择需要覆盖的核算账簿*/}
				</p>
			</div>
		)
	}
	render() {
		let { modal } = this.props;
		return (
			<div>
				{modal.createModal('copycheck', {
					title: this.state.json['publiccomponents-000021'], /* 国际化处理： 复制信息校验框*/
					type:'senior',
					content: this.modalContent(), //弹框内容，可以是字符串或dom
					beSureBtnClick: this.handleCopyCheckOK,//点击确定按钮事件
					cancelBtnClick: this.handleCancel, //取消按钮事件
					closeModalEve: this.handleCancel, //关闭按钮事件回调
				})}
			</div>
		);
	}
}
CopyCheckModal.defaultProps = defaultProps;

CopyCheckModal = createPage({})(CopyCheckModal);
export default CopyCheckModal;
